<template>
  <!-- 地区活动 -->
  <div>
    <div class="item-box" v-for="(item, index) in districtList" :key="index">
      <div class="left-box">
        <div class="title-box">
          <div class="type-box flexc">{{ item.cate_id_text }}</div>
          <div>{{ item.title }}</div>
        </div>
        <div>
          活动时间：{{ item.start_time_text }} ~{{ item.end_time_text }}
        </div>
        <div>活动单位：{{ item.depart_code_text }}</div>
      </div>
      <div class="right-box" v-if="item.endtime * 1000 > current_time">
        <van-button
          round
          type="info"
          color="#F57373"
          @click="districtJoin(item)"
          >去参与</van-button>
      </div>
      <div class="right-box" v-else>
        <van-button
          round
          type="info"
          color="#999999"
          @click="onFinish(item)"
          >已结束</van-button>
      </div>
    </div>
  </div>
</template>
    
<script>
export default {
  props: ["districtList"],
  data() {
    return {
      current_time: 0,
    }
  },
  methods: {
    /*去参与*/ 
    districtJoin(item) {
      var s = item.depart_code + "-" + item.id;
      // this.$router.push({ name: "eventDetails", query: { s: s } });
      // var s = item.depart_code + '-' + item.id

      var activeType =  "2" //校园活动
      // window.location.href =  window.location.origin+window.location.pathname+"#/eventDetails?s="+s;
      window.location.href =  window.location.origin+window.location.pathname+"#/eventDetails?s=" + s + "&activeType="+activeType;
    },
    /*已结束*/ 
    onFinish(item){
      console.log(item,'结束');
      this.$toast('活动已结束了哟！！！')
    }
  },
  mounted() {
    this.current_time = new Date().getTime(); //当前时间戳
  },
};
</script>
    
<style lang="scss" scoped>
.tabs-style {
  width: 100%;
  margin-top: 40px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 10;
}

.activityList {
  background-color: #f4f4f4;
  min-height: 100vh;
  height: 100%;

  .district-box {
    margin-top: 15px;
    .item-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 95%;
      line-height: 20px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 1);
      margin: 17px 8px;
      padding: 10px 12px;
      box-sizing: border-box;
      .left-box {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        font-family: SourceHanSansSC-regular;
        line-height: 25px;
        .title-box {
          display: flex;
          color: rgba(16, 16, 16, 1);
          font-size: 14px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          font-weight: bold;
          .type-box {
            width: 54px;
            height: 24px;
            border-radius: 4px;
            background-color: rgba(164, 173, 179, 0.1);
            color: rgba(226, 27, 27, 1);
            font-size: 12px;
            font-family: Microsoft Yahei;
            margin-right: 5px;
            font-weight: 500;
          }
        }
      }
      .right-box {
        display: flex;
        justify-content: right;
        align-items: center;
        .van-button {
          width: 80px;
          height: 30px;
          border-radius: 42px;
          background-color: rgba(255, 163, 43, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 12px;
          text-align: center;
          font-family: Microsoft Yahei;
          border: none;
        }
      }
    }
  }
}

.el-date-editor.el-input {
  width: 95%;
}
</style>